<!DOCTYPE html>
<html lang="en">
<head>
[#include "/customer/include/static.htm"]
	<link href="${path}/resources/css/user.css?v=2" rel="stylesheet" type="text/css"/>
	<link href="${path}/resources/plug/layui/css/layui.css" rel="stylesheet" type="text/css"/>
	<script src="${path}/resources/plug/layui/layui.js" type="text/javascript"></script>
</head>

<body>
<!--头部-->
[#include "/customer/include/header.ftl"]
<!--头部 end -->
<!-- container start -->
<div class="member">
	<!--左边-->
	<style>
		.btnRed_F_small {
			width: 80px;
			height: 36px;
			line-height: 34px;
			overflow: hidden;
			display: block;
			margin: 0 auto;
			color: #fff;
			font-size: 16px;
			text-align: center;
			cursor: pointer;
			outline: none;
			background-color: #F3485A;

		}

		td {
			border: #c0c9d5 1px solid !important;;
		}

		tr {
			border: #c0c9d5 1px solid !important;
		}

		th {
			border: #c0c9d5 1px solid !important;;
		}

		.tit {
			margin: 0 auto;
			font-size: 15px;
			color: #808080;
			text-align: left;
			letter-spacing: 2px;
			line-height: 30px;
		}
	</style>
[#include "/customer/include/member_left_menu.ftl"]
	<!--左边 end-->
	<div class="memberMain">
		<div class="member_tab">
			<div class="member_tab">
				<h1>找回交易密码</h1>
			</div>
			</div>
			<div class="member_tab_info">
				<form class="layui-form">
					<table class="layui-table">
						<tbody>
						<tr>
							<td colspan="2">
								<span class="tit">系统将发送一条短信到<b>${mobile?substring(0,3)+"*****"+mobile?substring(8)}</b>请输入短信的验证码</span>
							</td>
						</tr>
						<tr>
							<td><input type="text" name="captcha" class="layui-input" required
									   lay-verify="required" placeholder="请输入验证码"></td>
							<td><img src="${path}/common/random" id="code_img" width="100px" height="35"
									 onclick="this.src = '${path}/common/random?' + Math.random();"
									 title="点击刷新验证码"
									 style="top:18px;"/></td>
						</tr>
						<tr>
							<td>
								<input type="text" name="code" required lay-verify="required"
									   class="layui-input" placeholder="输入短信验证码" id="phoneCode">
							</td>
							<td>
								<input type="button" id="time_btn" value="点击获取" class="layui-btn"
									   style="width: 100px;background-color: #f3485a" >
							</td>
						</tr>
						</tbody>
					</table>
					<input type="hidden" name="token" value="${token}"/>
					<div class="forgot-error" style="display:none;" id="error"></div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn"
									style="width: 100px;background-color: #f3485a" id="btSubmit" lay-submit
									lay-filter="MainForm">下一步
							</button>
						</div>
					</div>
				</form>
			</div>
	</div>
</div>
<script type="text/javascript">
	layui.use(['form', 'layer'], function () {
		var form = layui.form(), $ = layui.jquery, layer = layui.layer;
		var wait = 59;

		function time() {
			$this = $("#time_btn");
			if (wait == 0) {
				$this.removeAttr("disabled");
				$this.removeClass("time_btn2").addClass('time_btn1');
				$this.val("免费获取验证码");
				wait = 60;
			} else {
				$this.attr("disabled", true);
				$this.removeClass("time_btn1").addClass('time_btn2');
				$this.val("重新发送(" + wait + ")");
				wait--;
				setTimeout(function () {
					time()
				}, 1000)
			}
		}

		$("#time_btn").click(function () {
			var captcha = $.trim($("input[name=captcha]").val());
			if (captcha == '') {
				layer.msg("图形验证码不能为空");
				return false;
			}
			var index = layer.load();
			ajax({
				url: "/sms/forget",
				type: "post",
				data: {"token": "${token}", "captcha": captcha},
				datatype: "json",
				beforeSend: function () {
					time();
				},
				success: function (result) {
					layer.close(index);
					if (result.type == "success") {
						layer.msg("验证码已发送，请及时查收短信", {icon: 1});
					} else {
						layer.msg(result.content, {icon: 2});
					}
				},
				complete: function () {
					layer.close(index);
				}
			});
		});

		form.on('submit(MainForm)', function (data) {
			var index = layer.load();
			ajax({
				url: "${path}/member/forget2",
				type: "POST",
				dataType: "json",
				cache: false,
				data: data.field,
				success: function (result) {
					layer.close(index);
					if (result && result.type && result.type == "success") {
						location.href = "${path}/member/forget3?token=" + result.content;
					} else {
						layer.msg(result.content);
						$("#code_img").attr("src", "${path}/common/random?t=" + new Date().getTime());
					}
				},
				complete: function () {
					layer.close(index);
				}
			});
			return false;
		});
	});
</script>
[#include "/customer/include/footer.ftl"]
</body>
</html>